<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/admin' }">管理首页</el-breadcrumb-item>
			<el-breadcrumb-item>文章编辑</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form v-loading="tableDataLoading" :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="文章名称" prop="title" :rules="[{ required: true, message: '文章名称不能为空'},]">
				<el-input v-model="numberValidateForm.title" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="meta" prop="meta" :rules="[{ required: true, message: 'meta不能为空'},]">
				<el-input v-model="numberValidateForm.meta" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="文章内容" prop="content" :rules="[{ required: true, message: '分类链接不能为空'},]">
        <mavon-editor :ishljs="true" @imgAdd="imgAdd" @imgDel="imgDel" v-model="numberValidateForm.content" :toolbarsFlag="true" :editable="true"></mavon-editor>
			</el-form-item>
			<el-form-item label="文章分类">
				  <el-checkbox-group v-model="numberValidateForm.categoryList">
            <el-checkbox v-for="(v,i) in numberValidateForm.type" :label="v.Name" :key="i"></el-checkbox>
          </el-checkbox-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
				<el-button @click="resetForm('numberValidateForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import * as qiniu from "qiniu-js";

export default {
  data() {
    return {
      tableDataLoading: false,
      numberValidateForm: {
        title: "",
        content: "",
        categoryList: [],
        type: [],
        qiniu_token: "",
        qiniu_domain: ""
      },
      qiniu_up_img: []
    };
  },
  created() {},
  mounted() {
    const _this = this;
    _this.get_qiniu_uptoken("admin/get_qiniu_uptoken", null, function(e) {
      _this.qiniu_token = e.data.uptoken;
      _this.qiniu_domain = e.data.domain;
      // console.log(_this.qiniu_token)
    });

    if (_this.$route.query.set) {
      _this.numberValidateForm = _this.saverFn.local.get("setBlogList");
      _this.numberValidateForm.type = [];
      console.log(_this.numberValidateForm);
    }
    _this.getCategory("admin/getCategory");
  },
  components: {
    mavonEditor
  },
  computed: {},
  methods: {
    submitForm(formName) {
      let _this = this;
      _this.tableDataLoading = true;
      _this.setCategory("admin/setBlogList", _this.numberValidateForm);
      _this.saverFn.formSubmit(_this, formName, null, function() {
        _this.numberValidateForm.typeStr = _this.numberValidateForm.categoryList.join(
          ","
        );
        _this.qiniu_up_img.forEach((v, i) => {
          // console.log(_this.numberValidateForm.content.replace(v.name,v.up_name))
          _this.numberValidateForm.content = _this.numberValidateForm.content.replace(
            v.name,
            "http://files.liujunjun.top/" + v.up_name
          );
          _this.numberValidateForm.content = _this.numberValidateForm.content.replace(
            "](" + i + ")",
            "](http://files.liujunjun.top/" + v.up_name + ")"
          );
        });
        if (_this.$route.query.set) {
          _this.numberValidateForm.id = _this.saverFn.local.get(
            "setBlogList"
          ).id;
          _this.saverFn.local.set("setBlogList", _this.numberValidateForm);
        }
      });
      _this.tableDataLoading = false;
    },
    getCategory: async function(url, data) {
      let _this = this;
      let response = await _this.http.get(url, data, _this);
      _this.numberValidateForm.type = response.data.data;
      if (_this.$route.query.set) {
        _this.numberValidateForm.categoryList = _this.saverFn.local
          .get("setBlogList")
          .type.split(",");
      }
      _this.saverFn.httpSuccess(_this, response, null, function() {
        _this.tableDataLoading = false;
      });
    },
    setCategory: async function(url, data) {
      let _this = this;
      let response = await _this.http.post(url, data);
      _this.saverFn.httpSuccess(_this, response, null, () => {
        if (!_this.$route.query.set) {
          _this.resetForm("numberValidateForm");
        }
      });
    },
    get_qiniu_uptoken: async function(url, data, fn) {
      let _this = this;
      let response = await _this.http.get(url, data, _this);
      _this.saverFn.httpSuccess(_this, response, null, fn, true);
    },
    imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      // console.log(pos)
      // console.log($file._name)
      const _this = this;
      let config = {
        useCdnDomain: true,
        region: qiniu.region.z2

        // region: 'http://upload.qiniup.com'
      };
      let putExtra = {
        fname: "",
        params: {},
        mimeType: null
      };
      let key =
        "images/upload_" + Date.parse(new Date()) / 1000 + "_" + $file._name;
      // console.log(_this.qiniu_token)
      let next = response => {
        let total = response.total;
        // console.log($file._name, _this.qiniu_domain + key)
        if (total.percent == 100) {
          _this.qiniu_up_img.push({
            up_name: key,
            name: $file._name
          });
        }
      };

      // let subscription;
      // 调用sdk上传接口获得相应的observable，控制上传和暂停
      let observable = qiniu.upload(
        $file,
        key,
        _this.qiniu_token,
        putExtra,
        config
      );
      observable.subscribe(next);

      // this.setCategory("admin/uploader_img", formdata)
    },
    imgDel(pos) {
      const _this = this;
      // console.log(_this.qiniu_up_img)
      let arr = _this.qiniu_up_img[pos];
      if (arr.up_name == "") {
        console.log("已经删除了");
        return false;
      }
      _this.http
        .get("admin/remove_qiniu_files", { key: arr.up_name }, _this)
        .then(function() {
          _this.qiniu_up_img[pos] = {};
          // console.log(e)
        });
      // 第一步.将图片上传到服务器.
    },
    resetForm(formName) {
      this.qiniu_up_img = [];
      this.numberValidateForm.categoryList = [];
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../public/pubilcColor.less";

.el-breadcrumb {
  background: @bgcolor;
  padding: 10px 15px;
  border-radius: 5px;
}
.demo-ruleForm {
  background: @bgcolor;
  margin-top: 30px;
  padding: 30px 0 10px;
}
</style>
